<template>
  <div class="login-container">
    <!-- 渐变绿 + 下坠小团动态背景层 -->
    <div class="bg-layer" aria-hidden="true">
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
    </div>
    <div class="login-wrapper">
      <!-- 左侧品牌与说明 -->
      <div class="brand-section">
        <div class="content-wrapper">
          <div class="logo">
            <img src="../../images/1.png" alt="数海领航" class="logo-image" />
          </div>
          <h1 class="brand-title">
            {{ t('login.title') }}
          </h1>
          <div class="brand-subtitle">
            {{ t('login.subtitle') }}
          </div>
          
          <div class="feature-tabs">
            <div class="feature-tab">
              <div class="tab-text">
                {{ t('login.feature1') }}
              </div>
            </div>
            <div class="feature-tab">
              <div class="tab-text">
                {{ t('login.feature2') }}
              </div>
            </div>
            <div class="feature-tab">
              <div class="tab-text">
                {{ t('login.feature3') }}
              </div>
            </div>
            <div class="feature-tab">
              <div class="tab-text">
                {{ t('login.feature4') }}
              </div>
            </div>
          </div>
        </div>

        <div class="brand-footer">
          {{ t('login.footer') }}
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <div class="login-form-section">
        <div class="form-header">
          <div class="language-selector">
            <LanguageSelector />
          </div>

          <div class="welcome-text">
            {{ t('common.welcome') }}
          </div>

          <div class="login-tabs">
            <div
              class="tab-item"
              :class="{ active: loginType === 'password' }"
              @click="loginType = 'password'"
            >
              {{ t('login.passwordLogin') }}
            </div>
            <div
              class="tab-item"
              :class="{ active: loginType === 'sms' }"
              @click="loginType = 'sms'"
            >
              {{ t('login.smsLogin') }}
            </div>
          </div>
        </div>

        <!-- 密码登录表单 -->
        <el-form v-if="loginType === 'password'" :model="passwordForm" :rules="passwordRules" ref="passwordFormRef">
          <el-form-item prop="username">
            <el-input
              v-model="passwordForm.username"
              :placeholder="t('login.usernamePlaceholder')"
              size="large"
              autocomplete="off"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="passwordForm.password"
              type="password"
              :placeholder="t('common.password')"
              size="large"
              show-password
              autocomplete="new-password"
            />
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="rememberMe">
              {{ t('login.agreement') }}
              <el-link type="primary" @click="$router.push('/terms-of-service')">
                {{ t('login.terms') }}
              </el-link>
              <el-link type="primary" @click="$router.push('/privacy-policy')">
                {{ t('login.privacy') }}
              </el-link>
            </el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="login-button"
              :loading="loading"
              @click="handlePasswordLogin"
            >
              {{ t('common.login') }}
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 验证码登录表单 -->
        <el-form v-else :model="smsForm" :rules="smsRules" ref="smsFormRef">
          <el-form-item prop="mobile">
            <el-input
              v-model="smsForm.mobile"
              :placeholder="t('login.mobilePlaceholder')"
              size="large"
              autocomplete="off"
            />
          </el-form-item>

          <el-form-item prop="code">
            <div class="code-input-wrapper">
              <el-input
                v-model="smsForm.code"
                :placeholder="t('login.codePlaceholder')"
                size="large"
                autocomplete="off"
              />
              <el-button
                class="send-code-btn"
                :disabled="codeBtnDisabled"
                @click="handleSendCode"
              >
                {{ codeButtonText }}
              </el-button>
            </div>
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="rememberMe">
              {{ t('login.agreement') }}
              <el-link type="primary" @click="$router.push('/terms-of-service')">
                {{ t('login.terms') }}
              </el-link>
              <el-link type="primary" @click="$router.push('/privacy-policy')">
                {{ t('login.privacy') }}
              </el-link>
            </el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="login-button"
              :loading="loading"
              @click="handleSmsLogin"
            >
              {{ t('common.login') }}
            </el-button>
          </el-form-item>
        </el-form>

        <div class="form-footer">
          <span class="register-link">
            <el-link type="primary" @click="$router.push('/register')">
              {{ t('login.register') }}
            </el-link>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { CaretBottom } from '@element-plus/icons-vue'
import { t, currentLanguage } from '@/utils/i18n'
import { useLanguageStore } from '@/store/language'
import LanguageSelector from '@/components/LanguageSelector.vue'
import Translate from '@/components/Translate.vue'
import { login, smsLogin, sendSmsCode, getUserInfo, setPassword } from '@/api/auth'
import { dispatchAuthEvent, AUTH_EVENTS } from '@/utils/auth'

const router = useRouter()
const languageStore = useLanguageStore()
const loginType = ref('password')
const passwordFormRef = ref(null)
const smsFormRef = ref(null)
const rememberMe = ref(false)
const loading = ref(false)
const countdown = ref(0)
const isFirstLogin = ref(false)
const tempToken = ref('')

// 密码登录表单
const passwordForm = reactive({
  username: '',
  password: ''
})

// 验证码登录表单
const smsForm = reactive({
  mobile: '',
  code: ''
})

// 设置密码表单 (首次登录)
const passwordSetForm = reactive({
  password: '',
  confirmPassword: ''
})

// 计算属性，确保规则随语言变化而更新
const passwordRules = computed(() => ({
  username: [{ required: true, message: t('login.usernameRequired'), trigger: 'blur' }],
  password: [{ required: true, message: t('login.passwordRequired'), trigger: 'blur' }]
}))

const smsRules = computed(() => ({
  mobile: [
    { required: true, message: t('login.mobileRequired'), trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: t('login.mobileInvalid'), trigger: 'blur' }
  ],
  code: [
    { required: true, message: t('login.codeRequired'), trigger: 'blur' },
    { min: 6, max: 6, message: t('login.codeInvalid'), trigger: 'blur' }
  ]
}))

// 计算属性：验证码按钮文字
const codeButtonText = computed(() => {
  if (countdown.value > 0) {
    return `${countdown.value}s`
  }
  return t('login.getCode')
})

// 计算属性：验证码按钮是否禁用
const codeBtnDisabled = computed(() => {
  return countdown.value > 0 || !smsForm.mobile || !/^1[3-9]\d{9}$/.test(smsForm.mobile)
})

// 发送验证码
const handleSendCode = async () => {
  try {
    try {
      // 常规方式发送
      const result = await sendSmsCode({ mobile: smsForm.mobile });

      ElMessage.success(t('login.codeSent'));

    } catch (error) {

      // 获取详细错误信息
      let errorMsg = t('login.codeSendFailed');
      if (error.response && error.response.data) {
        if (error.response.data.message) {
          errorMsg = error.response.data.message;
        } else if (error.response.data.msg) {
          errorMsg = error.response.data.msg;
        }
      } else if (typeof error === 'object' && error.message) {
        errorMsg = error.message;
      }

      ElMessage.error(errorMsg);
      throw error; // 继续抛出异常，阻止后续操作
    }

    // 倒计时
    countdown.value = 60;
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  } catch (error) {
    // 错误信息已经在前面处理过，这里不再重复显示
  }
}

// 密码登录
const handlePasswordLogin = async () => {
  if (loading.value) return

  // 检查是否同意协议
  if (!rememberMe.value) {
    ElMessage.warning(t('login.agreementRequired') || '请阅读并同意服务条款和隐私政策')
    return
  }

  passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const res = await login(passwordForm)
        // 检查返回的code值，只有成功时才调用handleLoginSuccess
        if (res.code === 200 || res.code === 0) {
        handleLoginSuccess(res.data)
        } else {
          // 直接显示返回的错误信息
          ElMessage.error(res.msg || t('login.loginFailed'))
        }
      } catch (error) {
        // 显示详细错误信息
        let errorMsg = error.message || t('login.loginFailed')
        if (error.response && error.response.data && error.response.data.message) {
          errorMsg = error.response.data.message
        } else if (error.response && error.response.data && error.response.data.msg) {
          errorMsg = error.response.data.msg
        } else if (typeof error === 'object' && error.message) {
          errorMsg = error.message
        }
        ElMessage.error(errorMsg)
      } finally {
        loading.value = false
      }
    }
  })
}

// 验证码登录
const handleSmsLogin = async () => {
  if (loading.value) return

  // 检查是否同意协议
  if (!rememberMe.value) {
    ElMessage.warning(t('login.agreementRequired') || '请阅读并同意服务条款和隐私政策')
    return
  }

  smsFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        // 先尝试使用axios请求
        let res;
        try {
          res = await smsLogin(smsForm);
        } catch (apiError) {
          // 尝试使用原生fetch
          const response = await fetch('/saas/auth/sms/login', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(smsForm)
          });

          if (!response.ok) {
            const errorText = await response.text();
            // 尝试解析错误信息
            let errorMsg = `HTTP错误 ${response.status}: ${response.statusText}`;
            try {
              const errorData = JSON.parse(errorText);
              if (errorData && errorData.message) {
                errorMsg = errorData.message;
              } else if (errorData && errorData.msg) {
                errorMsg = errorData.msg;
              }
            } catch (e) {}

            throw new Error(errorMsg);
          }

          res = await response.json();
        }

        // 检查返回的code值，只有成功时才进行后续处理
        if (res.code === 200 || res.code === 0) {
        // 判断是否为首次登录（需要设置密码）
        if (res.data.isFirstLogin) {
          // 存储首次登录标志
          localStorage.setItem('isFirstLogin', 'true')
          // 存储token
          localStorage.setItem('token', res.data.token)

          // 提示用户需要设置密码
          ElMessage.info(t('login.firstLoginSetPassword'))

          // 直接跳转到设置密码页面
          router.push('/set-password')
        } else {
          // 非首次登录，清除标志（以防之前有）
          localStorage.removeItem('isFirstLogin')
          // 正常登录处理
          handleLoginSuccess(res.data)
          }
        } else {
          // 直接显示返回的错误信息
          ElMessage.error(res.msg || t('login.loginFailed'))
        }
      } catch (error) {
        // 显示详细错误信息
        let errorMsg = error.message || t('login.loginFailed')
        if (error.response && error.response.data && error.response.data.message) {
          errorMsg = error.response.data.message
        } else if (error.response && error.response.data && error.response.data.msg) {
          errorMsg = error.response.data.msg
        } else if (typeof error === 'object' && error.message) {
          errorMsg = error.message
        }
        ElMessage.error(errorMsg)
      } finally {
        loading.value = false
      }
    }
  })
}

// 处理登录成功
const handleLoginSuccess = (data) => {
  if (!data || !data.token) {
    if (currentLanguage.value === 'zh') {
      ElMessage.error('登录信息不完整，请重试');
    } else {
      ElMessage.error('Login information is incomplete, please try again');
    }
    return;
  }

  try {
    // 清除之前可能存在的token和相关缓存
    localStorage.removeItem('token');

    // 清除邮箱相关缓存，防止显示上一个用户的配置
    import('@/utils/auth').then(module => {
      const { clearEmailCache } = module
      clearEmailCache()
    })

    // 存储token和用户信息
    localStorage.setItem('token', data.token);
    // 验证token存储是否成功
    const storedToken = localStorage.getItem('token');
    // if (!storedToken) {
    //   throw new Error('Token存储失败');
    // }
    // 存储用户信息
    if (data.username) {
      localStorage.setItem('username', data.username);
    }
    // 存储登录时间
    localStorage.setItem('login_time', Date.now().toString());
    ElMessage.success(t('login.loginSuccess'));

    // 发送登录成功事件
    dispatchAuthEvent(AUTH_EVENTS.LOGIN, {
      username: data.username,
      token: data.token
    });

    // 检查是否有登录后需要重定向的地址
    const redirectPath = localStorage.getItem('redirectPath') || sessionStorage.getItem('redirect_after_login') || '/';
    // 清除重定向标记
    localStorage.removeItem('redirectPath');
    sessionStorage.removeItem('redirect_after_login');

    // 增加延迟确保token已经保存完成
    setTimeout(() => {
      // 再次验证token是否存在
      const finalToken = localStorage.getItem('token');
      if (finalToken) {
        // 确保不会重定向到登录页
        const targetPath = redirectPath === '/login' ? '/' : redirectPath;
        router.push(targetPath);
      } else {
        if (currentLanguage.value === 'zh') {
          ElMessage.error('登录状态异常，请重试');
        } else {
          ElMessage.error('Login status exception, please try again');
        }
      }
    }, 100);
  } catch (error) {
    if (currentLanguage.value === 'zh') {
      ElMessage.error('登录状态处理失败，请重试');
    } else {
      ElMessage.error('Failed to handle login status, please try again');
    }
  }
}

</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变绿色背景 */
  background: linear-gradient(135deg, #ccfdff 0%, #d3e9fb 30%, #95ccfb 65%, #85c6fd 100%);
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative; /* 用于放置绝对定位的背景层 */
}

.login-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1920px; /* 限制最大宽度 */
  background-color: transparent; /* 透明以展示背景渐变 */
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  z-index: 1; /* 确保内容在背景层之上 */
}

.brand-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: transparent; /* 透明以展示背景渐变 */
  padding: 2vh 3vw 1.5vh 3vw; /* 使用视口单位 */
  min-height: 650px;
  border-right: none;
  /* 为右侧绝对定位的登录表单预留空间，避免遮挡 */
  padding-right: calc(clamp(350px, 35vw, 500px) + clamp(24px, 2.5vw, 40px));
}

/* 背景动态下坠小团（圆点/气泡） */
.bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.bg-layer .drop {
  position: absolute;
  top: -10%;
  width: 26px;
  height: 26px;
  border-radius: 4px; /* 方块微圆角 */
  background: transparent; /* 线条样式：不填充 */
  border: 2px solid rgba(255, 255, 255, 0.45); /* 白色描边 */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25); /* 轻微发光 */
  filter: none;
  animation: drop-fall 12s linear infinite; /* 左到右的对角下坠 */
}

/* 通过 nth-child 随机化大小、位置、速度与延迟 */
.bg-layer .drop:nth-child(1)  { left: 5%;   width: 14px; height: 14px;  animation-duration: 11s; animation-delay: -2s; }
.bg-layer .drop:nth-child(2)  { left: 15%;  width: 20px; height: 20px;  animation-duration: 13s; animation-delay: -6s; }
.bg-layer .drop:nth-child(3)  { left: 25%;  width: 40px; height: 40px;  animation-duration: 10s; animation-delay: -4s; }
.bg-layer .drop:nth-child(4)  { left: 35%;  width: 28px; height: 28px;  animation-duration: 14s; animation-delay: -8s; }
.bg-layer .drop:nth-child(5)  { left: 45%;  width: 18px; height: 18px;  animation-duration: 12s; animation-delay: -1s; }
.bg-layer .drop:nth-child(6)  { left: 55%;  width: 22px; height: 22px;  animation-duration: 15s; animation-delay: -5s; }
.bg-layer .drop:nth-child(7)  { left: 65%;  width: 20px; height: 20px;  animation-duration: 9s;  animation-delay: -7s; }
.bg-layer .drop:nth-child(8)  { left: 75%;  width: 26px; height: 26px;  animation-duration: 13s; animation-delay: -3s; }
.bg-layer .drop:nth-child(9)  { left: 85%;  width: 16px; height: 16px;  animation-duration: 11s; animation-delay: -9s; }
.bg-layer .drop:nth-child(10) { left: 50%;  width: 32px; height: 32px;  animation-duration: 16s; animation-delay: -11s; }
.bg-layer .drop:nth-child(11) { left: 12%;  width: 24px; height: 24px;  animation-duration: 12.5s; animation-delay: -10s; }
.bg-layer .drop:nth-child(12) { left: 92%;  width: 18px; height: 18px;  animation-duration: 10.5s; animation-delay: -12s; }

@keyframes drop-fall {
  0% {
    /* 从元素自身位置偏左、偏上的位置开始 */
    transform: translate(-12vw, -5vh) rotate(0deg) scale(1);
    opacity: 0.75;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    /* 终点：向右下方移动较长距离，形成左->右的下坠轨迹 */
    transform: translate(32vw, 120vh) rotate(12deg) scale(1.02);
    opacity: 0;
  }
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.logo-image {
  max-width: 100%;
  height: auto;
  max-height: clamp(60px, 8vh, 120px); /* 响应式高度 */
}

.brand-title {
  font-size: clamp(24px, 3vw, 42px); /* 响应式字体大小 */
  font-weight: bold;
  margin-bottom: 1vh;
  color: #333;
  margin-left: clamp(30px, 5vw, 80px); /* 响应式边距 */
}

.brand-subtitle {
  font-size: clamp(14px, 1.5vw, 20px); /* 响应式字体大小 */
  color: #888;
  margin-bottom: 2vh;
  margin-left: clamp(30px, 5vw, 80px); /* 响应式边距 */
}

.feature-tabs {
  margin-top: clamp(28px, 4vh, 56px);
  display: grid;
  grid-template-columns: 1fr; /* 默认单列 */
  gap: clamp(14px, 1.6vh, 20px);
  max-width: clamp(420px, 36vw, 640px);
  margin-left: clamp(30px, 5vw, 80px); /* 与标题左对齐 */
  align-items: stretch; /* 防止列高错乱 */
  align-content: start; /* 避免栅格拥挤重叠 */
  grid-auto-rows: auto;
  grid-auto-flow: row;
  position: relative;
  isolation: isolate; /* 建立新叠层上下文，避免意外覆盖 */
}

.feature-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 1vh, 10px);
  padding: clamp(16px, 2vh, 22px) clamp(16px, 2vw, 22px);
  background: #ffffff;
  color: #2b3640;
  border-radius: 12px;
  position: relative;
  width: calc(100% - 20px);
  margin: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  z-index: 0; /* 卡片彼此不叠放 */
  overflow: hidden; /* 文本不超出 */
  contain: layout paint; /* 隔离布局与绘制，提高稳定性 */
  margin-bottom: clamp(18px, 1.2vh, 24px);

  background: linear-gradient(135deg, #f5f7fa, #e6f7ff);
  border: 1px solid rgba(0,0,0,0.06);
}

/* 卡片1 - 蓝色渐变 */
.feature-tab:nth-child(1) {
  background: linear-gradient(135deg, #e6f7ff, #d1ebff);
  border: 1px solid rgba(24, 144, 255, 0.15);
}

/* 卡片2 - 橙色渐变 */
.feature-tab:nth-child(2) {
  background: linear-gradient(135deg, #fff7e6, #ffe8cc);
  border: 1px solid rgba(255, 152, 0, 0.15);
}

/* 卡片3 - 绿色渐变 */
.feature-tab:nth-child(3) {
  background: linear-gradient(135deg, #e6ffed, #d1f5d9);
  border: 1px solid rgba(38, 166, 154, 0.15);
}

/* 卡片4 - 紫色渐变 */
.feature-tab:nth-child(4) {
  background: linear-gradient(135deg, #f3e6ff, #e6d1ff);
  border: 1px solid rgba(126, 87, 194, 0.15);
}

.feature-tab:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.feature-tab:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(24, 144, 255, 0.22);
}

/* 卡片1悬停效果 */
.feature-tab:nth-child(1):hover {
  box-shadow: 0 12px 24px rgba(24, 144, 255, 0.15);
}

/* 卡片2悬停效果 */
.feature-tab:nth-child(2):hover {
  box-shadow: 0 12px 24px rgba(255, 152, 0, 0.15);
}

/* 卡片3悬停效果 */
.feature-tab:nth-child(3):hover {
  box-shadow: 0 12px 24px rgba(38, 166, 154, 0.15);
}

/* 卡片4悬停效果 */
.feature-tab:nth-child(4):hover {
  box-shadow: 0 12px 24px rgba(126, 87, 194, 0.15);
}

/* 左侧彩色细边条，增强区分度 */
.feature-tab::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background: linear-gradient(135deg, #e6f7ff, #d1ebff);
}
.feature-tab:nth-child(2)::after { background: linear-gradient(135deg, #fff7e6, #ffe8cc); }
.feature-tab:nth-child(3)::after { background: linear-gradient(135deg, #e6ffed, #d1f5d9); }
.feature-tab:nth-child(4)::after { background: linear-gradient(135deg, #f3e6ff, #e6d1ff); }

/* 角标编号（01-04） */
.feature-tab::before {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7785;
  background: rgba(0,0,0,0.04);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
}
/*
.feature-tab:nth-child(1)::before { content: "01"; }
.feature-tab:nth-child(2)::before { content: "02"; }
.feature-tab:nth-child(3)::before { content: "03"; }
.feature-tab:nth-child(4)::before { content: "04"; }
 */

/* 目前模板未使用图标容器，保留占位样式以便将来启用 */
.tab-icon { display: none; }

/* 发光描边 */
.tab-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 24px rgba(255,255,255,0.3) inset;
  pointer-events: none;
}

/* 内层波纹 */
.inner-wave {
  width: clamp(8px, 0.9vw, 10px);
  height: clamp(8px, 0.9vw, 10px);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.25); opacity: 0.65; }
  100% { transform: scale(1); opacity: 0.9; }
}

.tab-text {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  color: #2b3640;
  letter-spacing: 0.2px;
  line-height: 1.6;
}

/* ≥1200px时，改为两列栅格，更工整 */
@media screen and (min-width: 1200px) {
  .feature-tabs {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    max-width: clamp(600px, 44vw, 880px);
    gap: clamp(20px, 2.5vh, 30px);
  }

  .feature-tab {
    width: calc(100% - 15px); /* 减少宽度以创建右边距 */
    margin-right: 15px; /* 新增右边距 */
  }
}

.brand-footer {
  margin-top: 2vh; /* 减少上边距，为特性标签让出空间 */
  padding-bottom: 1vh;
  margin-bottom: 0;
  color: #888;
  font-size: clamp(14px, 1.5vw, 20px); /* 响应式字体大小 */
  text-align: left;
  position: relative;
  left: clamp(30px, 5vw, 80px); /* 响应式左偏移 */
  top: clamp(-20px, -2vh, -40px); /* 减少向上偏移，避免与特性标签重叠 */
}

.login-form-section {
  width: clamp(350px, 35vw, 500px); /* 响应式宽度 */
  padding: clamp(25px, 3vw, 50px); /* 响应式内边距 */
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.40); /* 40%不透明度 */
  backdrop-filter: blur(8px); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(8px); /* Safari支持 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明白色边框 */
  position: absolute;
  right: 150px; /* 响应式右边距 */
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  z-index: 10;
}

.login-form-section :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
  box-shadow: none;
}
.login-form-section :deep(.el-input__wrapper:hover) {
  border-color: rgba(24, 144, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.85);
}
.login-form-section :deep(.el-input__wrapper.is-focus) {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.9);
}

.form-header {
  margin-bottom: 20px;
}

.language-selector {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.welcome-text {
  font-size: clamp(18px, 2.5vw, 28px); /* 响应式字体大小 */
  font-weight: bold;
  color: #333;
  margin-bottom: clamp(20px, 3vh, 40px); /* 响应式下边距 */
  text-align: center;
}

.login-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: clamp(15px, 2vh, 25px); /* 响应式下边距 */
}

.tab-item {
  padding: clamp(8px, 1vh, 12px) 0; /* 响应式内边距 */
  margin-right: clamp(15px, 2vw, 25px); /* 响应式右边距 */
  cursor: pointer;
  position: relative;
  font-size: clamp(14px, 1.5vw, 18px); /* 响应式字体大小 */
  color: #888;
}

.tab-item.active {
  color: #1890ff;
  font-weight: bold;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
}

.login-button {
  width: 100%;
  height: clamp(45px, 6vh, 55px); /* 响应式高度 */
  font-size: clamp(14px, 1.5vw, 18px); /* 响应式字体大小 */
}

.form-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  color: #888;
}

.forgot-password {
  cursor: pointer;
}

.forgot-password:hover {
  color: #1890ff;
}

.code-input-wrapper {
  display: flex;
}

.send-code-btn {
  margin-left: 10px;
  width: clamp(100px, 12vw, 140px); /* 响应式宽度 */
}

/* 媒体查询 - 针对不同屏幕尺寸优化 */

/* 小屏幕笔记本 (1366x768 及以下) */
@media screen and (max-width: 1366px) {
  .login-wrapper {
    max-width: 1366px;
  }

  .brand-section {
    padding: 1.5vh 2.5vw 1vh 2.5vw;
    min-height: 600px;
    /* 保留为右侧表单预留的空间 */
    padding-right: calc(clamp(320px, 32vw, 420px) + clamp(20px, 2vw, 36px));
  }

  .brand-title {
    font-size: clamp(20px, 2.5vw, 32px);
    margin-left: clamp(25px, 4vw, 60px);
  }

  .brand-subtitle {
    font-size: clamp(12px, 1.3vw, 16px);
    margin-left: clamp(25px, 4vw, 60px);
  }

  .feature-tabs {
    margin-top: clamp(40px, 5vh, 60px); /* 小屏幕下适当减少向下移动距离 */
  }

  .feature-tab {
    padding: clamp(12px, 1.5vh, 20px) clamp(12px, 1.5vw, 20px);
    margin-left: clamp(-25px, -2.5vw, -40px);
    padding-left: clamp(35px, 4vw, 60px);
    width: calc(100% - 15px); /* 小屏幕下适中的右边距 */
    margin-right: 15px; /* 新增右边距 */
  }

  .tab-text {
    font-size: clamp(14px, 1.8vw, 20px);
  }

  .login-form-section {
    width: clamp(380px, 32vw, 480px);
    padding: clamp(20px, 2.5vw, 40px);
    right: clamp(60px, 3vw, 120px);
  }

  .welcome-text {
    font-size: clamp(16px, 2.2vw, 24px);
    margin-bottom: clamp(15px, 2.5vh, 30px);
  }
}

/* 标准桌面屏幕 (1367px - 1920px) */
@media screen and (min-width: 1367px) and (max-width: 1920px) {
  .login-wrapper {
    max-width: 1920px;
  }

  .brand-section {
    padding: 2vh 3vw 1.5vh 3vw;
    /* 保留为右侧表单预留的空间 */
    padding-right: calc(clamp(380px, 30vw, 480px) + clamp(24px, 2.5vw, 40px));
  }

  .login-form-section {
    width: clamp(380px, 30vw, 480px);
    right: clamp(80px, 3.5vw, 150px);
  }
}

/* 大屏幕显示器 (1921px 及以上) */
@media screen and (min-width: 1921px) {
  .login-wrapper {
    max-width: 2560px;
  }

  .brand-section {
    padding: 2.5vh 2.5vw 2vh 2.5vw;
    /* 保留为右侧表单预留的空间 */
    padding-right: calc(clamp(420px, 25vw, 550px) + clamp(28px, 2.5vw, 48px));
  }

  .brand-title {
    font-size: clamp(32px, 2.5vw, 48px);
    margin-left: clamp(60px, 4vw, 100px);
  }

  .brand-subtitle {
    font-size: clamp(16px, 1.2vw, 24px);
    margin-left: clamp(60px, 4vw, 100px);
  }

  .feature-tabs {
    margin-top: clamp(40px, 6vh, 72px);
  }

  /* 统一大屏下卡片为网格内的常规方块，避免溢出重叠 */
  .feature-tab {
    padding: clamp(18px, 2vh, 26px);
    width: calc(100% - 25px); /* 大屏幕下更大的右边距 */
    margin-right: 25px; /* 新增右边距 */
  }

  .tab-text {
    font-size: clamp(18px, 1.2vw, 24px);
  }
}

  .login-form-section {
    width: clamp(420px, 25vw, 550px);
    padding: clamp(35px, 2.5vw, 60px);
    right: clamp(140px, 3vw, 150px);
  }
  .welcome-text {
    font-size: clamp(22px, 2vw, 32px);
    margin-bottom: clamp(25px, 3vh, 45px);
  }

  .login-button {
    height: clamp(50px, 5vh, 60px);
    font-size: clamp(16px, 1.3vw, 20px);
  }


/* 超高分辨率优化 (2560x1440 及以上) */
@media screen and (min-width: 2560px) {
  .brand-title {
    font-size: clamp(36px, 2.2vw, 52px);
  }

  .brand-subtitle {
    font-size: clamp(18px, 1.1vw, 26px);
  }

  .tab-text {
    font-size: clamp(20px, 1.4vw, 30px);
  }

  .welcome-text {
    font-size: clamp(24px, 1.8vw, 36px);
  }
}

/* 垂直空间较小的屏幕优化 */
@media screen and (max-height: 768px) {
  .brand-section {
    min-height: 500px;
    padding: 1vh 3vw 0.5vh 3vw;
  }

  .feature-tabs {
    margin-top: clamp(25px, 3vh, 40px); /* 垂直空间小时减少向下移动距离 */
    gap: 3px;
  }

  .feature-tab {
    padding: clamp(10px, 1.2vh, 18px) clamp(12px, 1.5vw, 20px);
  }

  .brand-footer {
    margin-top: 1.5vh;
    top: clamp(-30px, -3vh, -50px);
  }

  .login-form-section {
    padding: clamp(15px, 2vh, 35px) clamp(20px, 2.5vw, 45px);
  }

  .welcome-text {
    margin-bottom: clamp(10px, 2vh, 25px);
  }

  .login-tabs {
    margin-bottom: clamp(10px, 1.5vh, 20px);
  }
}
</style>